<template>
  <div class="xin">
    <div class="header">
      <div class="xin_header">
        <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
        <span>出租房</span>
        <p></p>
      </div>
      <div class="xin_nav">
        <span>{{ city }}</span>
        <div class="search">
          <input
            type="text"
            v-model="queryInfo.quyu"
            @input="sousuo"
            placeholder="请在这里输入区域/商圈"
          />
          <van-icon name="search" />
        </div>
        <span>地图找房</span>
      </div>
      <div class="xin_img" @click="Change($event)">
        <p>商铺</p>
        <p>写字楼</p>
        <p>小区</p>
      </div>
      <div class="xin_ding">
        <p
          @click="
            () => {
              this.comName = 'Area';
              this.show = false;
            }
          "
        >
          区域<van-icon name="arrow-down" />
        </p>
        <p
          @click="
            () => {
              this.comName = 'Price';
              this.show = false;
            }
          "
        >
          价格<van-icon name="arrow-down" />
        </p>
        <p
          @click="
            () => {
              this.comName = 'House';
              this.show = false;
            }
          "
        >
          户型<van-icon name="arrow-down" />
        </p>
        <p
          @click="
            () => {
              this.comName = 'Screen';
              this.show = false;
            }
          "
        >
          筛选<van-icon name="arrow-down" />
        </p>
      </div>
    </div>
    <div class="xin_list" v-show="show">
      <dl @click="goDetail(v.id)" v-for="v in houseList" :key="v.id">
        <dt><img :src="v.img" alt="" /></dt>
        <dd>
          <h4>{{ v.shuoming }}</h4>
          <p>
            <span>{{ v.tingshi }}</span>
            <span>{{ v.xiaoqu }}</span>
          </p>
          <p>
            <span>{{ v.jiage }}</span>
            <span>{{ v.pingmi }}万</span>
          </p>
          <p>
            {{ v.huxing }}
          </p>
        </dd>
      </dl>
    </div>
    <div class="shouye" v-show="show" @click="$router.go(-1)">首页</div>
    <component
      @getScreen="getScreen"
      @getPrice="getPrice"
      @submit="submit"
      @getHouse="getHouse"
      :is="comName"
      @oneClick="oneClick"
    ></component>
  </div>
</template>
<script>
import axios from "../axios/index";
import { reactive, ref } from "vue";
import Area from "../components/Area";
import House from "../components/House";
import Price from "../components/Price";
import Screen from "../components/Screen";
export default {
  name: "Xin",
  components: {
    Area,
    House,
    Price,
    Screen,
  },
  data() {
    return {
      houseList: [],
      show: true,
      queryInfo: {
        quyu: "",
        jiage: "",
        huxing: "",
        chaoxiang: "",
        xiaoqu: "",
        tingshi: "",
      },
      comName: "",
      city: window.city,
    };
  },
  methods: {
    getPrice(v) {
      this.queryInfo.jiage = v;
      this.getHoustList();
    },
    getScreen(v) {
      this.queryInfo.chaoxiang = v;
      this.getHoustList();
    },
    getHouse(item) {
      this.queryInfo.tingshi = item;
      this.getHoustList();
    },
    oneClick(item) {
      console.log(item);
      this.queryInfo.quyu = item;
      this.getHoustList();
    },
    submit(e) {
      this.comName = e;
      this.show = true;
    },
    goDetail(id) {
      this.$router.push(`/xindetail/${id}`);
      window.localStorage.setItem("router", "/chuz");
    },
    sousuo() {
      this.getHoustList();
    },
    Change(e) {
      // this.queryInfo.huxing = e.target.innerHTML;
      // console.log(this.queryInfo);
      // this.getHoustList();
    },
    getHoustList() {
      axios
        .get("/chuzufang", {
          params: this.queryInfo,
        })
        .then((res) => {
          // console.log(res);
          if (res.code === 200) {
            this.houseList = res.results;
          }
          // console.log(this.houseList);
        });
    },
  },
  created() {
    this.getHoustList();
    if (this.comName === "") {
      this.show = true;
    }
  },
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.shouye {
  padding: 5px 18px;
  position: fixed;
  bottom: 20px;
  right: 10px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background: #fff;
}
.xin {
  width: 100%;
}
.header {
  width: 100%;
  height: auto;
}
.xin_header {
  width: 100%;
  height: 50px;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #1684f5;
  color: #fff;
}
.xin_list {
  width: 100%;
  height: auto;
}
.xin_list dl {
  width: 100%;
  height: auto;
  display: flex;
  padding: 5px 10px;
}
.xin_list dl dt {
  width: 150px;
  height: 100px;
  padding: 5px;
  margin-right: 10px;
}
.xin_list dl dt img {
  width: 100%;
  height: 100%;
}
.xin_list dl dd {
  font-size: 14px;
}
.xin_list dl dd p:nth-child(3) span:first-child {
  margin-right: 5px;
  color: orange;
}
.xin_list dl dd p:last-child {
  padding: 2px 8px;
  background: #eee;
  width: 60px;
  text-align: center;
}
.xin_nav {
  width: 100%;
  height: 50px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.search {
  background: #f4f4f4;
  padding: 0 10px;
  color: #878787;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
}
.search input {
  height: 35px;
  border: 0;
  outline: none;
  background: none;
}
.xin_img {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #333;
}
.header .xin_ding {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 99999;
  justify-content: space-around;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
</style>